<template>
  <!--  运营商报告-->
  <div>
    <el-row :gutter="24">
      <el-col :span="4" class="label" >
        <div class="overflow" :title="$t('认证姓名')">{{ $t('认证姓名') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow" :title="reportData.realName">{{ reportData.realName }}</div>
      </el-col>
      <el-col :span="4" class="label overflow">
        <div class="overflow" :title="$t('手机号码')">{{ $t('手机号码') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow" :title="reportData.cellPhone">{{ reportData.cellPhone }}</div>
      </el-col>
      <el-col :span="4" class="label overflow">
        <div class="overflow"  :title="$t('认证时间')">{{ $t('认证时间') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow"  :title="reportData.creationTime">{{ reportData.creationTime }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="4" class="label overflow">
        <div class="overflow" :title="$t('所属运营商')">{{ $t('所属运营商') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow" :title="reportData.operators">{{ reportData.operators }}</div>
      </el-col>
      <el-col :span="4" class="label overflow">
        <div class="overflow" :title="$t('生日')">{{ $t('生日') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow"  :title="reportData.birthday">{{ reportData.birthday }}</div>
      </el-col>
      <el-col :span="4" class="label overflow">
        <div class="overflow"  :title="$t('认证身份证号码')">{{ $t('认证身份证号码') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow" :title="reportData.idcard">{{ reportData.idcard }}</div>
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="4" class="label overflow">
        <div class="overflow" :title="$t('当前话费余额')">{{ $t('当前话费余额') }}</div>
      </el-col>
      <el-col :span="4" class="item overflow">
        <div class="overflow" :title="reportData.balance">{{ reportData.balance }}</div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {operatorsReport} from '@/api/order'
export default {
  props: ['routesQuery'],
  data() {
    return {
      reportData: {},
    }
  },
  mounted() {
    this.getOperatorsReport()
    // this.getCallLog()
  },
  methods: {
    // 获取运营商报告
    async getOperatorsReport() {
      const {userId} = this.routesQuery
      const res = await operatorsReport({
        userId: parseInt(userId),
      })
      if (res.code === 1) {
        this.reportData = res.data ?  res.data : {}
      }
    },

  }
}
</script>

<style scoped>
.label {
  height: 50px;
  background-color: #fffbed;
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  line-height: 50px;
  text-align: center;
}

.item {
  height: 50px;
  border-bottom: 1px solid #dcdcdc;
  border-right: 1px solid #dcdcdc;
  box-sizing: border-box;
  text-align: center;
  line-height: 50px;
}
</style>
